<script lang="ts" setup>
import { ref } from "vue";

const dataList = ref<any>([
  {
    name: "早教",
    sort: "50",
  },
  {
    name: "编程",
    sort: "50",
  },
  {
    name: "数学辅导",
    sort: "45",
  },
  {
    name: "英语学习",
    sort: "60",
  },
  {
    name: "音乐培训",
    sort: "55",
  },
  {
    name: "美术教育",
    sort: "70",
  }
]);

const modalVisible = ref(false);

const handleAction = (action: string) => {
  if (action === 'add') {
    modalVisible.value = true;
  }
};
</script>

<template>
  <umrp-container bg-color="#f2f2f2" height="100%" padding="16px" :gap="16">
    <umrp-breadcrumb :items="['商家管理', '商家分类']"></umrp-breadcrumb>
    <umrp-card>
      <umrp-table :data="dataList" :action-bar="true" @action="handleAction">
        <template #columns>
          <umrp-table-column title="序号" data-index="id"></umrp-table-column>
          <umrp-table-column title="分类图标" slot-name="icon"></umrp-table-column>
          <umrp-table-column title="分类名称" data-index="name"></umrp-table-column>
          <umrp-table-column title="分类排序" data-index="sort"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
        </template>
        <template #amount="{ record }">
          <umrp-text-price>{{ record.amount }}</umrp-text-price>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
            <umrp-popconfirm message="您确认删除么？">
              <umrp-button type="danger">移除</umrp-button>
            </umrp-popconfirm>
          </umrp-space>
        </template>
        <template #icon>
          <umrp-image :width="50" :height="50"></umrp-image>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
  <umrp-modal v-model:visible="modalVisible" :width="500">
    <umrp-container padding="24px 0">
      <umrp-form>
        <umrp-form-item label="分类图标">
          <umrp-upload></umrp-upload>
        </umrp-form-item>
        <umrp-form-item label="分类名称">
          <umrp-input></umrp-input>
        </umrp-form-item>
        <umrp-form-item label="分类排序">
          <umrp-input-number :default-value="50"></umrp-input-number>
        </umrp-form-item>
      </umrp-form>
    </umrp-container>
  </umrp-modal>
</template>